<template>
  <div class="label-list-component">
    <el-card shadow="never" body-style="padding: 20px 20px 0px 20px;">
      <el-form
        ref="form"
        inline
        :model="form"
        class="form-options"
        label-width="100px">
        <el-form-item label="批次号" prop="batchNo">
          <el-input v-model="form.batchNo" disabled/>
        </el-form-item>
        <el-form-item label="操作人" prop="operName">
          <el-input v-model="form.operName" disabled/>
        </el-form-item>
        <el-form-item label="采购单号" prop="purchaseNo">
          <el-input
            v-model="form.purchaseNo"
            disabled/>
        </el-form-item>
        <el-form-item label="采购人" prop="purchaseId">
          <el-input
            v-model="form.purchaseName"
            disabled/>
        </el-form-item>

        <el-form-item label="概要说明" class="long-content">
          <el-input
            type="textarea"
            :rows="2"
            disabled
            v-model="form.orderExplain">
          </el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table
      :data="tableData"
      header-cell-class-name="table-header"
      style="width: 100%;margin-top: 20px"
      show-overflow-tooltip>
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="parentName"
        show-overflow-tooltip
        label="器材分类">
      </el-table-column>
      <el-table-column
        prop="equipmentTypeName"
        show-overflow-tooltip
        label="器材名称">
      </el-table-column>
      <el-table-column
        prop="num"
        label="总数量">
      </el-table-column>
      <el-table-column
        prop="releasedNum"
        label="已发行数量">
      </el-table-column>
      <el-table-column
        label="本次发行数量">
        <template slot-scope="scope">
          <el-input style="width: 90px" size="mini" v-model="scope.row.releaseNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope='scope'>
          <el-button type="primary" @click="handleOperateClick(scope.row,'发行')">发行
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin-top: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog
      title="标签发行"
      top="25px"
      @closed="onLabelIssueClosed"
      :visible.sync="dialogVisible"
      :message="message"
      append-to-body
      width="680px">
      <LabelIssueComponent
        :form="labelForm"
        :message="message"
        ref="LabelIssueComponent"/>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToReleaseList, getLabelToIssue } from '@/api/purchase'
import LabelIssueComponent from '../../components/LabelIssueComponent'

export default {
  name: 'LabelListComponent',
  components: {
    LabelIssueComponent
  },
  props: {
    form: {
      type: Object,
      default: function() {
        return {
          id: '',
          batchNo: '',
          operName: '',
          orderStatus: '',
          operId: '',
          purchaseNo: '',
          purchaseName: '',
          purchaseId: '',
          orderExplain: ''
        }
      }
    }
  },
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      total: 0,
      dialogVisible: false,
      tableData: [],
      labelForm: [],
      message: ''
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    handleSizeChange: function(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getTableData()
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getTableData()
    },
    getTableData() {
      const param = { page: this.currentPage, rows: this.pageSize }
      Object.assign(param, this.form)
      param.id = this.form.id
      getToReleaseList(param).then(res => {
        this.tableData = res.resultData
        this.total = res.total
      })
    },
    handleOperateClick(row, tag) {
      if (tag == '发行') {
        const value = row.releaseNum
        if ((value == '' || value == undefined || value == null || !Number(value))) {
          this.$message({
            type: 'error',
            message: '请输入大于0的数字'
          })
        } else {
          const param = {}
          Object.assign(param, row)
          getLabelToIssue(param).then(res => {
            res.resultData.forEach(item => {
              item.status = -1
            })
            this.labelForm = res.resultData
            this.dialogVisible = true
            this.message = res.rMsg
          })
        }
      }
    },
    onLabelIssueClosed() {
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.label-list-component {
  max-height: 680px;
  overflow-y: auto;

  ::v-deep .el-form-item__content {
    width: 185px !important;

    .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 100%;
    }
  }

  ::v-deep .long-content {
    .el-form-item__content {
      width: 480px !important;

      .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
        width: 100%;
      }

      .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 100%;
      }

      .el-cascader--small {
        width: 100%;
      }
    }
  }
}
</style>
